<script setup lang="ts">
import { ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import HanderView from './views/hander.vue'
import Footer from './components/footer.vue'
import Suspend from './components/suspend.vue'
import {computed} from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

// 计算属性，判断当前路由是否需要显示侧边栏
const showSidebar = computed(() => {
  return route.path === '/company' // 只有company页面显示侧边栏
})

// 滚动到对应部分的方法
const scrollToSection = (index: string) => {
  const section = document.getElementById(index)
  if (section) {
    section.scrollIntoView({ behavior: 'smooth' })
  }
}

</script>



<template>
  <el-config-provider :locale="zhCn">
     <div class="common-layout">
    <el-container>
      <el-header><HanderView/></el-header>
       <el-container>
          <!-- 左侧导航栏 -->
          <el-aside  width="220px" class="sidebar">
            <el-menu
              default-active="intention"
              class="el-menu-vertical"
             @select="scrollToSection"
            >
              <el-menu-item index="intention">
                <span>企业创立初衷</span>
              </el-menu-item>
              <el-menu-item index="develop">
                <span>企业发展历程</span>
              </el-menu-item>
              <el-menu-item index="plan">
                <span>企业一五规划</span>
              </el-menu-item>
              <el-menu-item index="culture">
                <span>企业核心价值观</span>
              </el-menu-item>
              <el-menu-item index="salary">
                <span>企业盈利分配</span>
              </el-menu-item>
              <el-menu-item index="manage">
                <span>企业运营管理</span>
              </el-menu-item>
            </el-menu>
          </el-aside>
          
          <el-main>
            <router-view/>
          </el-main>
        </el-container>
      <el-footer>
        <Footer></Footer>
      </el-footer>
    </el-container>
  </div>
  </el-config-provider>
</template>

<style lang="scss" scoped>
.common-layout{
  background-color: #f9fafb;
    .sidebar {
    background-color: #fff;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
    height: calc(100vh - 60px); // 减去header高度
    position: sticky;
    top: 60px;
    
    .el-menu-vertical {
      border-right: none;
      
      :deep(.el-menu-item) {
        height: 50px;
        line-height: 50px;
        font-size: 16px;
        
        &.is-active {
          color: #409eff;
          background-color: #ecf5ff;
        }
      }
    }
  }
  
  .el-main {
    padding: 20px;
  }
}

@media (max-width: 768px) {
  .sidebar {
    display: none;
  }
}

</style>
